<template>
    <el-container>
        <el-header>
            <el-form inline>
                <el-form-item label="员工姓名">
                    <el-input v-model="data.stf_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="data.stf_category">
                        <el-option label="全部" :value="0"></el-option>
                        <el-option v-for="item in category" :key="item.dic_id" :label="item.dic_name"
                            :value="item.dic_id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="add" type="primary">新增</el-button>
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table :data="list" stripe>
                <el-table-column prop="stf_name" label="姓名" width="100" />
                <el-table-column label="职务类别" width="120">
                    <template #default="scope">
                        <span>{{ scope.row.stf_category ? category.find((item) => item.dic_id ===
        scope.row.stf_category)?.dic_name :
        ""
}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" width="400">
                    <template #default="scope">
                        <span> {{ scope.row.stf_remark ? scope.row.stf_remark : "暂无备注" }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="员工状态" width="80">
                    <template #default="scope">
                        <span class="invalid" :class="{ act: scope.row.stf_invalid === 1 }">{{ scope.row.stf_invalid ===
        1 ?
        '在职' : '离职'
}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="400" align="center">
                    <template #default="scope">
                        <el-button @click="update(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.stf_invalid === 0" type="success"
                            @click="reinstate(scope.row.stf_id)">入职</el-button>
                        <el-button v-else type="danger" @click="dimission(scope.row.stf_id)">离职</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination small background layout="prev,pager,next,sizes,jumper,->,total" :total="total"
                :current-page="currentPage" @current-change="currentPageChange" :page-sizes="[3, 5, 7, 10]"
                :default-page-size="5" @size-change="sizeChange" />
        </el-footer>
    </el-container>



    <el-dialog v-model="isEdit" title="编辑功能">
        <el-form>
            <el-form-item label="姓名">
                <el-input v-model="model.stf_name"></el-input>
            </el-form-item>
            <el-form-item label="职务类别">
                <el-select v-model="model.stf_category">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option v-for="item in category" :key="item.dic_id" :label="item.dic_name" :value="item.dic_id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="model.stf_remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="isEdit = false">取消</el-button>
                <el-button @click="save">保存</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { StaffApi } from "@/api";
import { onMounted, ref, computed, watch, nextTick } from "vue";
import { useStaff } from "@/store";
import { ElMessage, ElMessageBox } from 'element-plus';

const StaffStore = useStaff();

const data = ref<HttpPayload.GetStaffList>({
    stf_category: 0,
    stf_name: "",
    begin: 0,
    pageSize: 5,
});
const currentPage = ref<number>(1)
const total = ref<number>(0);
const list = ref<Vm.Staff[]>([]);
const category = computed(() => {
    return StaffStore.dictionaryList.filter(
        (item) => item.dic_group_key === "staff_category"
    );
});
const isEdit = ref<boolean>(false);

const currentPageChange = (value: number) => currentPage.value = value;
const sizeChange = (value: number) => data.value.pageSize = value;
watch(() => [data.value.stf_name, data.value.stf_category, data.value.pageSize, currentPage.value], async () => {
    try {
        data.value.begin = (currentPage.value - 1) * data.value.pageSize
        const result = await StaffApi.getList(data.value);
        total.value = result.total;
        list.value = result.list;
    } catch (e) {/**/ }
})
//离职
const dimission = async (stf_id: number) => {
    try {
        await ElMessageBox.confirm("确认离职", "提示")
        await StaffApi.dimission(stf_id)
        list.value.forEach(item => {
            if (item.stf_id === stf_id) item.stf_invalid = 0;
        })
        ElMessage({ message: '成功离职', type: 'success' })
    } catch (e) {/**/ }
}
//入职
const reinstate = async (stf_id: number) => {
    try {
        await ElMessageBox.confirm('确认入职', '提示')
        await StaffApi.reinstate(stf_id)
        list.value.forEach(item => {
            if (item.stf_id === stf_id)
                item.stf_invalid = 1;
        })
        ElMessage({ message: '成功入职', type: 'success' })
    } catch (e) {/**/ }
}
const model = ref<HttpPayload.StaffEdit>({
    stf_id: 0,
    stf_name: "",
    stf_category: 0,
    stf_remark: ""
});
//新增
const add = () => {
    model.value = { stf_id: 0, stf_name: "", stf_category: 0, stf_remark: "" }
    nextTick(() => isEdit.value = true)
}
//编辑
const update = (item: Vm.Staff) => {
    model.value.stf_id = item.stf_id
    model.value.stf_name = item.stf_name
    model.value.stf_category = item.stf_category
    model.value.stf_remark = item.stf_remark
    nextTick(() => isEdit.value = true)
}
const save = async () => {
    try {
        if (model.value.stf_id === 0) {
            await StaffApi.add(model.value)
            ElMessage({ message: '新增成功', type: 'success' })
        } else {
            await StaffApi.update(model.value)
            let stf_invalid: number = 0
            stf_invalid = list.value.find(item => item.stf_id === model.value.stf_id)?.stf_invalid as number
            list.value.splice(list.value.findIndex(item => item.stf_id === model.value.stf_id), 1, { ...model.value, stf_invalid })
            ElMessage({ message: '编辑成功', type: 'success' })
        }
        isEdit.value = false
    } catch (e) {/**/ }
}
onMounted(async () => {
    try {
        const result = await StaffApi.getList(data.value);
        total.value = result.total;
        list.value = result.list;
        await StaffStore.getDictionary();
    } catch (e) {
        /**/
    }
});
</script>
  
<style scoped lang="stylus">
  .invalid
    color: red
    display inline-block
    width 100%
    text-align: center
  .invalid.act
    color: green
  </style>
  